<!-- 导航图标控件设置面板 -->
<template>
    <el-tabs modelValue="widget" stretch>
        <el-tab-pane :label="`${widget.widgetData.component.title}组件`" name="widget">
            <el-scrollbar>
                <el-collapse modelValue="1">
                    <el-collapse-item title="组件设置" name="1">
                        <!-- 展示 -->
                        <nav-icon-is-sideslip :widget="widget" />

                        <template v-if="!widget.widgetData.eles.customFeature.isSideslip">
                            <el-divider></el-divider>
                            <layout-pane label="列数">
                                <si-input-number
                                    v-model="row"
                                    label="行数"
                                    :min="1"
                                />
                                <si-input-number
                                    v-model="col"
                                    label="列数"
                                    :min="1"
                                    :max="8"
                                />
                            </layout-pane>
                        </template>
                    </el-collapse-item>
                </el-collapse>

                <!-- 图片列表 -->
                <row-content :widget="widget" />

                <!-- 元素可见设置 -->
                <row-element-visible :widget="widget" />
            </el-scrollbar>
        </el-tab-pane>

        <el-tab-pane label="组件样式" name="style">
            <el-scrollbar>
                <el-collapse modelValue="1">
                    <el-collapse-item title="组件设置" name="1">
                        <!-- 大小 -->
                        <layout-pane label="大小">
                            <si-input-number
                                v-model="widget.widgetData.eles.style.width"
                                :min="0"
                                label="宽度"
                                unit="px"
                            />
                        </layout-pane>

                        <!-- 圆角 -->
                        <el-divider></el-divider>
                        <row-border-radius :widget="widget" />

                        <!-- 位置 -->
                        <el-divider></el-divider>
                        <row-position :widget="widget" />

                        <!-- 背景 -->
                        <el-divider></el-divider>
                        <row-background :widget="widget" />

                        <!-- 透明 -->
                        <el-divider></el-divider>
                        <row-opacity :widget="widget" />

                        <!-- 边框 -->
                        <el-divider></el-divider>
                        <row-border :widget="widget" />
                        
                        <!-- 边框阴影 -->
                        <el-divider></el-divider>
                        <row-shadow type="box-shadow" :widget="widget" />
                    </el-collapse-item>
                </el-collapse>

                <el-collapse modelValue="1">
                    <el-collapse-item title="图片设置" name="1">
                        <layout-pane label="大小">
                            <si-input-number
                                v-model="widget.widgetData.eles.customFeature.iconSize"
                                :min="0"
                                label="宽高"
                            />
                        </layout-pane>

                        <el-divider></el-divider>
                        <layout-pane label="间距">
                            <si-input-number
                                v-model="widget.widgetData.eles.customFeature.iconPadding"
                                label="内边距"
                            />
                        </layout-pane>

                        <el-divider></el-divider>
                        <layout-pane label="圆角">
                            <si-input-number
                                v-model="widget.widgetData.eles.customFeature.iconBorderRadius"
                                :min="0"
                            />
                        </layout-pane>

                        <!-- 边框 -->
                        <el-divider></el-divider>
                        <si-border
                            v-model:borderStyle="widget.widgetData.eles.customFeature.iconBorderStyle"
                            v-model:borderWidth="widget.widgetData.eles.customFeature.iconBorderWidth"
                            v-model:borderColor="widget.widgetData.eles.customFeature.iconBorderColor"
                        />
                    </el-collapse-item>
                </el-collapse>

                <el-collapse modelValue="1">
                    <el-collapse-item title="字体设置" name="1">
                        <row-font-style :widget="widget" />
                    </el-collapse-item>
                </el-collapse>
            </el-scrollbar>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
import LayoutPane from '@/components/setting-pane/layout-pane'
import {
    SiInputNumber,
    SiBorder
} from '@/components/setting-pane/setting-item'
import {
    RowContent,
    RowPosition,
    RowOpacity,
    RowBackground,
    RowBorder,
    RowShadow,
    RowBorderRadius,
    RowFontStyle,
    RowElementVisible
} from '../../widget-setting-row'
import NavIconIsSideslip from './components/nav-icon-is-sideslip'
export default defineComponent({
    name: 'NavIconSetting',
    components: {
        LayoutPane,
        SiInputNumber,
        SiBorder,
        RowContent,
        RowPosition,
        RowOpacity,
        RowBackground,
        RowBorder,
        RowShadow,
        RowBorderRadius,
        RowFontStyle,
        RowElementVisible,
        NavIconIsSideslip
    },
    props: {
        widget: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { widget } = toRefs(props)

        const picList = computed({
            get: () => widget.value.widgetData.eles.content || [],
            set: val => widget.value.widgetData.eles.content = val
        })

        const row = computed({
            get: () => widget.value.widgetData.eles.customFeature.row,
            set: val => {
                widget.value.widgetData.eles.customFeature.row = val
                const picNum = (col.value * val) - picList.value.length
                if (picNum >= 0) {
                    picList.value.push(...[...new Array(picNum).keys()].map((item, index) => ({
                        title: `导航${index + 1}`,
                        pic: '',
                        customFeature: {
                            action: ''
                        }
                    })))
                } else {
                    picList.value.splice(picNum, -picNum)
                }
            }
        })

        const col = computed({
            get: () => widget.value.widgetData.eles.customFeature.col,
            set: val => {
                widget.value.widgetData.eles.customFeature.col = val
                const picNum = (row.value * val) - picList.value.length
                if (picNum >= 0) {
                    picList.value.push(...[...new Array(picNum).keys()].map((item, index) => ({
                        title: `导航${index + 1}`,
                        pic: '',
                        customFeature: {
                            action: ''
                        }
                    })))
                } else {
                    picList.value.splice(picNum, -picNum)
                }
            }
        })

        return {
            widget,
            row,
            col
        }
    }
})
</script>
